<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>设备状态统计分析</title>
		<link rel="stylesheet" type="text/css" href="../../css/style.css"/>
		<link rel="stylesheet" type="text/css" href="../../css/list.css"/>
		<link rel="stylesheet" type="text/css" href="../../css/layui.css"/>
		<link rel="stylesheet" type="text/css" href="../../css/jquery-ui.css" />
	</head>
	<body>
		<!-- 蓝色背景区域 -->
		<div class="wrap">
			<!-- 白色可用区域 -->
			<div class="canuse">
				<!------ 位置 ------>
	            <p class="contentText local"><span>位置：设备管理 > 设备状态统计分析</span></p>
	            
	            <!------ tab标签 ------>
	            <div class="layui-tab layui-tab-card">
				    <ul class="layui-tab-title">
					    <li class="layui-this">设备状态统计分析</li>
					    <li >设备运行状态参数</li>
				    </ul>
					<div class="layui-tab-content">
					    <div class="layui-tab-item layui-show">
					    	<div class="content">
					    		<!-- 搜索区 -->
					            <div class="search_area">
				                    <h4 class="sel_title"><img src="../../img/list/brand1.png" /><span>查询条件</span></h4>
				                    <div class="select_area">
				                        <div class="select_text clear">
											<div class="label_input">
												<label class="contentText">所属产线：</label> <select name="">
													<option value="">--请选择--</option>
													<option value="">产线1</option>
													<option value="">产线2</option>
												</select>
											</div>
				                        	<div class="label_input">
												<label class="contentText">设备名称：</label> <select name="">
													<option value="">--请选择--</option>
													<option value="">设备1</option>
													<option value="">设备2</option>
												</select>
											</div>
											<div class="label_input">
					                            <label class="contentText">开始日期：</label> <input type="text" name="" class="dateControl" id="dateControl" readonly="readonly" />
				                        	</div>
				                        	<div class="label_input">
					                            <label class="contentText">结束日期：</label> <input type="text" name="" class="dateControl" id="dateControl1" readonly="readonly" />
				                        	</div>
											<div class="floatLeft">
												<button class="btn_search bgd_blue_search">查询</button>
												<button class="btn_clear bgd_white_clear">重置</button>
											</div>
				                        </div>
				                    </div>
					            </div>
					            <!-- 列表区 -->
					            <div class="show_list">
				                	<div class="title_operate">
				                    	<h4 class="sel_title"><img src="../../img/list/brand1.png" /><span>设备状态统计图表</span></h4>
				                	</div>
				                	<div class="list_area clear">
										<div class="info_area">
											<!-- 信息列表区 -->
											<div class="info_area" id="info_area">
												<!-- echarts 统计图表 -->
												<div class="chart" id="main" style="width: 100%;height: 200px;z-index: 0;"></div>
											</div>
										</div>	
				                        <!-- 图表区 -->
				                        <div class="info_area_left1" style="height: auto;">
				                        	<!-- 信息列表区 -->
											<div  >
												<!-- echarts 统计图表 -->
												<div class="chart" id="left" style="width: 100%;height: 250px;z-index: 0;"></div>
											</div>
				                        </div>
				                        <!-- 信息列表区 -->
				                        <div class="info_area_right1" style="height: auto;">
			                        		<!-- 信息列表区 -->
											<div >
												<!-- echarts 统计图表 -->
												<div class="chart" id="right" style="width: 100%;height: 250px;z-index: 0;"></div>
											</div>
				                        </div>
				                    </div>
				                </div>
					    	</div>
						</div>
					    <div class="layui-tab-item">
					    	<div class="content">
					    		<!-- 搜索区 -->
								<div class="search_area">
									<h4 class="sel_title"><img src="../../img/list/brand1.png" /><span>查询条件</span></h4>
									<div class="select_area">
										<div class="select_text clear">
											<div class="label_input">
												<label class="contentText">所属产线：</label> <select name="">
													<option value="">--请选择--</option>
													<option value="">产线1</option>
													<option value="">产线2</option>
												</select>
											</div>
											<div class="floatLeft">
												<button class="btn_search bgd_blue_search">查询</button>
												<button class="btn_clear bgd_white_clear">重置</button>
											</div>
										</div>
									</div>
								</div>
		            
		            			<!-- 列表区 -->
					            <div class="show_list">
				                	<div class="title_operate">
				                    	<h4 class="sel_title"><img src="../../img/list/brand1.png" /><span>设备运行状态列表</span></h4>
				                	</div>
				                	<div class="list_area">
				                        <!-- 信息列表区 -->
				                        <div class="penal_area">
				                            <table class="" border="1" cellspacing="0" cellpadding="0" width="100%">
												<tbody>
													<tr class="menuText list_head">
														<th class="">设备一</th>
														<th class=""><font color="green">在线</font></th>
													</tr>
												</tbody>
												<tbody class="" id="tableflow">
													<tr class="listTableText list_list">
														<td width="50%">主轴转速</td>
														<td width="50%">800r/m</td>
													</tr>
													<tr class="listTableText list_list">
														<td>进给速度</td>
														<td>530</td>
													</tr>
													<tr class="listTableText list_list">
														<td>进给倍率</td>
														<td>140%</td>
													</tr>
													<tr class="listTableText list_list">
														<td>X轴转速</td>
														<td>7200r/m</td>
													</tr>
												</tbody>
											</table>
										</div>
										 <!-- 信息列表区 -->
										 <div class="penal_area">
				                            <table class="" border="1" cellspacing="0" cellpadding="0" width="100%">
												<tbody>
													<tr class="menuText list_head">
														<th class="">设备二</th>
														<th class=""><font color="yellow">暂停</font></th>
													</tr>
												</tbody>
												<tbody class="" id="tableflow">
													<tr class="listTableText list_list">
														<td width="50%">主轴转速</td>
														<td width="50%">800r/m</td>
													</tr>
													<tr class="listTableText list_list">
														<td>进给速度</td>
														<td>530</td>
													</tr>
													<tr class="listTableText list_list">
														<td>进给倍率</td>
														<td>140%</td>
													</tr>
													<tr class="listTableText list_list">
														<td>X轴转速</td>
														<td>7200r/m</td>
													</tr>
												</tbody>
											</table>
										</div>
										 <!-- 信息列表区 -->
										 <div class="penal_area">
				                            <table class="" border="1" cellspacing="0" cellpadding="0" width="100%">
												<tbody>
													<tr class="menuText list_head">
														<th class="">设备三</th>
														<th class=""><font color="green">在线</font></th>
													</tr>
												</tbody>
												<tbody class="" id="tableflow">
													<tr class="listTableText list_list">
														<td width="50%">主轴转速</td>
														<td width="50%">800r/m</td>
													</tr>
													<tr class="listTableText list_list">
														<td>进给速度</td>
														<td>530</td>
													</tr>
													<tr class="listTableText list_list">
														<td>进给倍率</td>
														<td>140%</td>
													</tr>
													<tr class="listTableText list_list">
														<td>X轴转速</td>
														<td>7200r/m</td>
													</tr>
												</tbody>
											</table>
										</div>
										 <!-- 信息列表区 -->
										 <div class="penal_area">
				                            <table class="" border="1" cellspacing="0" cellpadding="0" width="100%">
												<tbody>
													<tr class="menuText list_head">
														<th class="">设备四</th>
														<th class=""><font color="#00FFFF">待机</font></th>
													</tr>
												</tbody>
												<tbody class="" id="tableflow">
													<tr class="listTableText list_list">
														<td width="50%">主轴转速</td>
														<td width="50%">800r/m</td>
													</tr>
													<tr class="listTableText list_list">
														<td>进给速度</td>
														<td>530</td>
													</tr>
													<tr class="listTableText list_list">
														<td>进给倍率</td>
														<td>140%</td>
													</tr>
													<tr class="listTableText list_list">
														<td>X轴转速</td>
														<td>7200r/m</td>
													</tr>
												</tbody>
											</table>
										</div>
										 <!-- 信息列表区 -->
										 <div class="penal_area">
				                            <table class="" border="1" cellspacing="0" cellpadding="0" width="100%">
												<tbody>
													<tr class="menuText list_head">
														<th class="">设备五</th>
														<th class=""><font color="#C0C0C0">离线</font></th>
													</tr>
												</tbody>
												<tbody class="" id="tableflow">
													<tr class="listTableText list_list">
														<td width="50%">主轴转速</td>
														<td width="50%">800r/m</td>
													</tr>
													<tr class="listTableText list_list">
														<td>进给速度</td>
														<td>530</td>
													</tr>
													<tr class="listTableText list_list">
														<td>进给倍率</td>
														<td>140%</td>
													</tr>
													<tr class="listTableText list_list">
														<td>X轴转速</td>
														<td>7200r/m</td>
													</tr>
												</tbody>
											</table>
										</div>
										 <!-- 信息列表区 -->
										 <div class="penal_area">
				                            <table class="" border="1" cellspacing="0" cellpadding="0" width="100%">
												<tbody>
													<tr class="menuText list_head">
														<th class="">设备六</th>
														<th class=""><font color="green">在线</font></th>
													</tr>
												</tbody>
												<tbody class="" id="tableflow">
													<tr class="listTableText list_list">
														<td width="50%">主轴转速</td>
														<td width="50%">800r/m</td>
													</tr>
													<tr class="listTableText list_list">
														<td>进给速度</td>
														<td>530</td>
													</tr>
													<tr class="listTableText list_list">
														<td>进给倍率</td>
														<td>140%</td>
													</tr>
													<tr class="listTableText list_list">
														<td>X轴转速</td>
														<td>7200r/m</td>
													</tr>
												</tbody>
											</table>
										</div>
										 <!-- 信息列表区 -->
										 <div class="penal_area">
				                            <table class="" border="1" cellspacing="0" cellpadding="0" width="100%">
												<tbody>
													<tr class="menuText list_head">
														<th class="">设备七</th>
														<th class=""><font color="green">在线</font></th>
													</tr>
												</tbody>
												<tbody class="" id="tableflow">
													<tr class="listTableText list_list">
														<td width="50%">主轴转速</td>
														<td width="50%">800r/m</td>
													</tr>
													<tr class="listTableText list_list">
														<td>进给速度</td>
														<td>530</td>
													</tr>
													<tr class="listTableText list_list">
														<td>进给倍率</td>
														<td>140%</td>
													</tr>
													<tr class="listTableText list_list">
														<td>X轴转速</td>
														<td>7200r/m</td>
													</tr>
												</tbody>
											</table>
				                        </div>
									</div>
				                </div>
					    	</div>
					    </div>
					</div>
				</div>
			</div>
			<!-- 版尾  -->
			<div class="ending">
				Copyright© 2019-2020 磐基技术有限公司
			</div>
			
		</div>
	</body>
	<script src="../../js/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../js/frame/common.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../js/layui.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../js/3rd/jquery-ui.js" type="text/javascript"></script>
	<script src="../../js/3rd/echarts.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		var h = document.documentElement.clientHeight;
		$(".wrap").css("height", h);
		
		// 获取每行 td 的兄弟节点
		$("td").hover(   
			function () {      
				$(this).parent().children().addClass("td_hover");   
			},    
			function () {      
				$(this).parent().children().removeClass("td_hover");   
			}
		);
		
		// 日期控件
		$(function(){
	        $(".dateControl").datepicker({
	        	dateFormat : 'yy-mm-dd',
	            monthNamesShort:["January","February","March","April","May","June", "July","August","September","October","November","December"],
	 		 	changeYear:true,
	 		 	changeMonth:true,
	 		 	showOn:"button",
	 		 	buttonImage:"../../img/button/calendar.png",
	 		 	buttonImageOnly:false
	        });
	     });
		
		//点击右上角关闭弹框
		function rolledYieldClose(){
			$(".rolledYield").css("display", "none");
		}
		//点击计划显示弹框
		function rolledYieldShow(){
			$(".rolledYield").css("display", "block");
		}
		
		//删除规则
	    function delUserGroup() {
			
	        var list = [];
	        var checks = $("input[name='ids']:checked");
	        $.each(checks, function(index, obj) {
	            list.push(obj.id);
	        });
	        if (!list.length > 0) {
	            alert("请选择要删除的内容");
	            return;
	        }
	        if (!confirm("确定要删除所选用户组吗？")) {
	            return;
	        }
	        alert("提醒:删除时，正在使用的用户组将无法删除！");
	        $.ajax({
	            type : 'POST',
	            url : 'userGroup/delUserGroup',
	            data : JSON.stringify(list),
	            contentType : 'application/json; charset=utf-8',
	            async : true,
	            cache : false,
	            success : function(data) {
	                alert(data == 'success' ? "删除成功" : "被使用：无法删除!!!");
	                if (data != 'success') {
	                    return;
	                }
	
	                var current = PageUtils._currentPage['userGroupPage'];
	                PageUtils.pageClick(current, 'userGroupPage');
	            }
	
	        });
	    }
	    
	    layui.use('element', function(){
			var $ = layui.jquery, 
			    element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块
			  
		    //触发事件：添加、删除、切换
		    var active = {
			    tabAdd: function(){
			        //新增一个Tab项
			        element.tabAdd('demo', {
			        	title: '新选项'+ (Math.random()*1000|0), 
			        	content: '内容'+ (Math.random()*1000|0),
			        	id: new Date().getTime() //实际使用一般是规定好的id，这里以时间戳模拟下
			        })
			    },
			    tabChange: function(){
			        //切换到指定Tab项
			        element.tabChange('demo', '22'); //切换到：“用户管理”
			    }
		    };
		  
		    $('.site-demo-active').on('click', function(){
		    	var othis = $(this), 
		        	type = othis.data('type');
		    	active[type] ? active[type].call(this, othis) : '';
		    });
		  
		    //Hash地址的定位
		    var layid = location.hash.replace(/^#test=/, '');
		    element.tabChange('test', layid);
		  
		    element.on('tab(test)', function(elem){
		   		location.hash = 'test='+ $(this).attr('lay-id');
		    });
		});
	</script>

	<script>
		//显示图表
		function showGraph(){
			var myChart = echarts.init(document.getElementById('main'));
			var colors = ['#00FF00', '#FF0000','#FFFF00', '#C0C0C0']; //三种状态的颜色
			var state = ['正常', '故障','待机', '离线']; //三种状态
		
			// echart配置
			var option = {
				color: colors,
				title: {
			        text: '设备运行状态图表',
					x:'center',
        			y:'top',
			    },
				tooltip: {//提示框
					formatter: function (params) {
						return params.name + ':' + params.value[1] + '~' + params.value[2];
					}//数据的值
				},
				legend: {//图例
					data: state,
					bottom: '1%',
					selectedMode: false, // 图例设为不可点击
					textStyle: {
						color: '#000'
					}
				},
				grid: {//绘图网格
					left: '3%',
					right: '3%',
					top: '1%',
					bottom: '10%',
					containLabel: true
				},
				xAxis: {                   
					type: 'time',               
					interval: 3600  * 1000,   //以一个小时递增 
					min:'2009/6/1 1:00', //将data里最小时间的整点时间设为min,否则min会以data里面的min为开始进行整点递增
					axisLabel: {formatter: function (value) { 
						var date = new Date(value); return getzf(date.getHours()) + ':00';  
						function getzf(num) {
							if (parseInt(num) < 10) {  num = '0' + num; }  
							return num; 
						}             
					},                   
					}
				},
				yAxis: {
					data: ['正常', '故障','待机', '离线']
				},
				series: [
					// 用空bar来显示三个图例
					{ name: state[0], type: 'bar', data: [] },
					{ name: state[1], type: 'bar', data: [] },
					{ name: state[2], type: 'bar', data: [] },
					{ name: state[3], type: 'bar', data: [] },
					{
						type: 'custom',                
						renderItem: function (params, api) {//开发者自定义的图形元素渲染逻辑，是通过书写 renderItem 函数实现的
							var categoryIndex = api.value(0);//这里使用 api.value(0) 取出当前 dataItem 中第一个维度的数值。
							var start = api.coord([api.value(1), categoryIndex]); // 这里使用 api.coord(...) 将数值在当前坐标系中转换成为屏幕上的点的像素值。
							var end = api.coord([api.value(2), categoryIndex]);
							var height = api.size([0, 1])[1];
		
							return {
								type: 'rect',// 表示这个图形元素是矩形。还可以是 'circle', 'sector', 'polygon' 等等。
								shape: echarts.graphic.clipRectByRect({ // 矩形的位置和大小。
									x: start[0],
									y: start[1] - height / 2,
									width: end[0] - start[0],
									height: height
								}, { // 当前坐标系的包围盒。
									x: params.coordSys.x,
									y: params.coordSys.y,
									width: params.coordSys.width,
									height: params.coordSys.height
								}),
								style: api.style()
							};
						},
						encode: {
							x: [1, 2], // data 中『维度1』和『维度2』对应到 X 轴
							y: 0// data 中『维度0』对应到 Y 轴
						},
						data: [ // 维度0 维度1 维度2
						{
							itemStyle: { normal: { color: colors[0] } },//条形颜色
							name: '正常',
							value: [0, '2009/6/1 0:00', '2009/6/1 5:00']//0,1,2代表y轴的索引，后两位代表x轴数据开始和结束
						},
							{
								itemStyle: { normal: { color: colors[0] } },
								name: '正常',
								value: [0, '2009/6/1 6:13', '2009/6/1 8:22']
							},
						{
							itemStyle: { normal: { color: colors[1] } },
							name: '故障',
							value: [1, '2009/6/1 5:00', '2009/6/1 6:13']
						},
							{
								itemStyle: { normal: { color: colors[1] } },
								name: '故障',
								value: [1, '2009/6/1 8:22', '2009/6/1 9:10']
							},
							{
								itemStyle: { normal: { color: colors[1] } },
								name: '故障',
								value: [1, '2009/6/1 12:47', '2009/6/1 14:52']
							},
						{
							itemStyle: { normal: { color: colors[2] } },
							name: '待机',
							value: [2, '2009/6/1 9:10', '2009/6/1 12:47']
						},
						{
							itemStyle: { normal: { color: colors[2] } },
							name: '待机',
							value: [2, '2009/6/1 14:52', '2009/6/1 17:00']
						},
						{
							itemStyle: { normal: { color: colors[3] } },
							name: '离线',
							value: [3, '2009/6/1 17:00', '2009/6/1 24:00']
						},
						]
					}
				]
			};

			myChart.setOption(option);	
		}

		//显示图表
		function showGraph2(){
			var myChart = echarts.init(document.getElementById('left'));
			var option = {
            title: {
                text: '异常数量柱状图',
				x:'center',
        		y:'top',
            },
            tooltip: {},
            legend: {
                data:['数量']
            },
            xAxis: {
				name: '时间',// 给X轴加单位
                type : 'category',
                data: ["2020-1-12","2020-1-13","2020-1-14","2020-1-15","2020-1-16","2020-1-17","2020-1-18"]
            },
            yAxis: {
				name: '故障次数',// 给y轴加单位
			},
            series: [{
                name: '故障次数',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20, 2],
				center: ['50%', '45%'],
				itemStyle: {
							normal: {
								label: {
									show: true, //开启显示
									position: 'top', //在上方显示
									textStyle: { //数值样式
										color: 'black',
										fontSize: 16
									}
								}
							}
						},
            }]
        };

			myChart.setOption(option);	
		}

		//显示图表
		function showGraph3(){
			var myChart = echarts.init(document.getElementById('right'));
			option = {
				title: {
					text: '设备故障模式占比',
					x:'center',
        			y:'top',
				},
				tooltip: {
					trigger: 'item',
					formatter: "{a} <br/>{b} : {c} ({d}%)"
				},
				legend: {
					orient: 'vertical',
					left: '85%',  //图例距离左的距离
					y: 'center',  //图例上下居中
					data: ["故障一","故障二","故障三","故障四","故障五", "故障六"]
					},
				color: ['#CD5C5C', '#FFFF00','#00CED1', '#9ACD32', '#FFC0CB','#C0C0C0'],
				stillShowZeroSum: false,
				series: [
					{
						name: '故障分布',
						type: 'pie',
						radius: '60%',
						center: ['50%', '50%'],
						data: [
							{value: 1, name: '故障一'},
							{value: 3, name: '故障二'},
							{value: 7, name: '故障三'},
							{value: 4, name: '故障四'},
							{value: 4, name: '故障五'},
							{value: 4, name: '故障六'},
						],
						itemStyle: {
							emphasis: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(128, 128, 128, 0.5)'
							}
						}
					}
				]
			};

			myChart.setOption(option);	
		}

		showGraph();
		showGraph2();
		showGraph3();
	</script>
</html>
